<template>
  <div class="dialog">
    <el-dialog
      :title="dialog.title"
      :visible.sync="dialog.show"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
    >
      <div class="form">
        <el-form
          ref="form"
          :model="formData"
          :rules="formRules"
          label-width="120px"
          style="margin: 10px; width: auto"
        >
          <el-form-item label="收支类型:">
            <el-select v-model="formData.type" placeholder="收支类型">
              <el-option
                v-for="(formtype, index) in formatTypeList"
                :key="index"
                :label="formtype"
                :value="formtype"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="收支描述:" prop="describe">
            <el-input type="describe" v-model="formData.describe"></el-input>
          </el-form-item>
          <el-form-item label="收入:" prop="income">
            <el-input type="income" v-model="formData.income"></el-input>
          </el-form-item>
          <el-form-item label="支出:" prop="expend">
            <el-input type="expend" v-model="formData.expend"></el-input>
          </el-form-item>
          <el-form-item label="账户余额:" prop="cash">
            <el-input type="cash" v-model="formData.cash"></el-input>
          </el-form-item>
          <el-form-item label="备注:" prop="remark">
            <el-input type="textarea" v-model="formData.remark"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="dialog.show = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Dialog",
  props: {
    dialog: Object,
    formData:Object
  },
  data() {
    return {
      formatTypeList: [
        "提现",
        "提现手续费",
        "充值",
        "充值礼券",
        "优惠券",
        "转账",
      ],
      formRules: {
        describe: [
          { required: true, message: "收支描述不能为空", trigger: "blur" },
        ],
        income: [{ required: true, message: "收入不能为空", trigger: "blur" }],
        expend: [{ required: true, message: "支出不能为空", trigger: "blur" }],
        cash: [
          { required: true, message: "现金余额不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    onSubmit(form){
      this.$refs[form].validate( valid => {
        if (valid) {
          const url = this.dialog.option == "add" ? "add" : `edit/${this.formData.id}`
          this.$axios.post(`/api/profiles/${url}`, this.formData)
          .then(res => {
            //添加成功
            this.$message({
              message:url == "add" ? "添加成功" : "修改成功",
              type:"success"
            })
          }).catch(err => console.log(err))
          //隐藏对话框
          this.dialog.show = false
          this.$emit("update")
        }
      })
    }
  },
};
</script>

<style scoped>
@import url("../../node_modules/element-ui/lib/theme-chalk/index.css");
.dialog {
  /* width: 100%;
  height: 100%; */
}
</style>